<style>
    .ly-number{
        font-size: 24px;
    }
    .ly-number i.el-icon-caret-top{
        color: #19be6b;
        font-size: 12px;
    }
    .ly-number i.el-icon-caret-bottom{
        color: #ed4014;
        font-size: 12px;
    }
    .el-table__row  .ly-number{
        font-size: 14px;
    }
</style>
<template>
    <span class="ly-number" >{{prefix}}{{countShow}}
    <i  v-if="trend&&showUp" :class="{'el-icon-caret-bottom':!up,'el-icon-caret-top':up}"></i>
    </span>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-number',
            props: {
                'trend':{
                    default:false
                },
                up:{
                    default:false
                },
                fixed:{
                    default:0
                },
                prefix:{
                    default:''
                },
                value: {
                    default: 0
                },auto:{
                    default: false
                }
            }, watch: {
                value: function (value) {
                    this.countUp();
                }
            }, data: function () {
                return {
                    showUp:false,
                    count: 0,
                    countShow: ''
                };
            }, created: function () {
                this.countUp();
            }, destroyed:function () {
                if(this.interIndex){
                    clearInterval(this.interIndex);
                }
            },methods: {
                countUp: function () {
                    if(this.interIndex){
                        clearInterval(index);
                    }
                    var me = this;
                    if(this.auto){
                        this.showUp=false;
                        var index = setInterval(function () {
                            if (me.count >= me.value) {
                                me.count=me.value;
                                me.showUp=true;
                                me. showNumber();
                                clearInterval(index);
                                return;
                            }
                            me.count += parseInt(me.value/1000)+10;
                            if (me.count >= me.value) {
                                me.count=me.value;
                            }
                            me. showNumber();
                        }, 5);
                        this.interIndex=index;
                    }else{
                        me.count=me.value;
                        me.showUp=true;
                        me.showNumber();
                    }
                },showNumber:function () {
                    var me = this;
//                    if(me.count==me.value){
//                        me.countShow=me.value.toFixed(me.fixed);
//                        return;
//                    }
                    var m = parseInt(me.count )+ '';
                    var length=m.length%3;
                    var start=0;
                    var str='';
                    do{
                        if(length>0){
                            str+=','+m.substr(start,length);
                        }
                        start+=length;
                        length=3;
                    }while (start+length<=m.length);
                    me.countShow=str.substr(1);

                }
            }
        }
    });
</script>


